<!-- 展示分类与搜索框 -->
<script setup>
import ArticleCardMini from "@/components/article/ArticleCardHot.vue";
// import ArticleCardMini from '@/components/article/ArticleCardMini.vue';
import { useAccountStore } from "@/stores/useAccountStore";
import { getUserArticleList } from "@/apis/user";
import { getIndexHot } from "@/apis/home";
import { Search } from "@element-plus/icons-vue";
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { getTypes } from "@/apis/article";

const accountStore = useAccountStore();
const account = accountStore.getAccount();
const code = ref(999);

//跳转登录页
const router = useRouter();
const createArticle = () => {
  if (code.value == 0) {
    router.push({
      path: "/editor",
      query: {
        modify: 0,
      },
    });
  } else {
    router.push({
      path: "/login",
    });
  }
};

const input = ref("");
const jumpSearch = () => {
  router.push({
    path: "/search",
    query: {
      para: input.value,
    },
  });
};

const articleList = ref([]);
onMounted: {
  code.value = account.code;
  // 获取后端数据
  // getUserArticleList().then(res => {
  //     articleList.value = res.data.pageInfo.list;
  // });
  articleList.value = [
    {
      title: "Linux入门",
    },
    {
      title: "前端实现分页",
    },
    {
      title: "部署vue项目",
    },
    {
      title: "Linux入门",
    },
    {
      title: "前端实现分页",
    },
    {
      title: "部署vue项目",
    },
  ];
}


</script>

<template>
  <div style="margin-top: 44px">
    <el-input class="input" v-model="input" placeholder="请输入搜索内容">
      <template #append>
        <el-button @click="jumpSearch" :icon="Search" />
      </template>
    </el-input>
    <div class="distance" style="margin-bottom: 18px">
      <el-text class="title">最热文章</el-text>
    </div>

    <el-card class="card" style="margin-left: 20px">
      <div style="margin-left: 15px">
        <ArticleCardMini :articleList="articleList" />
      </div>
    </el-card>

    <div style="margin-bottom: 18px">
      <el-text class="title">我的最近发布</el-text>
    </div>

    <!-- 传递文章数据给子组件 -->
    <el-card class="card" style="margin-left: 20px">
      <div style="margin-left: 15px">
        <ArticleCardMini
          v-if="code == 0"
          :articleList="articleList"
        ></ArticleCardMini>
        <el-text class="text" v-else>登录查看你的文章</el-text>
      </div>
    </el-card>
  </div>

  <div style="margin-bottom: 18px">
    <el-text class="title">公告</el-text>
  </div>

  <el-card class="card" style="margin-left: 20px">
    <div style="margin-left: 15px">
      <ArticleCardMini :articleList="articleList" />
    </div>
  </el-card>
</template>

<style scoped>
.tag {
  margin-top: 7px;
  margin-right: 5px;
}

.item {
  margin-top: 10px;
}

.input {
  height: 35px;
  width: 320px;
  margin-bottom: 20px;
  margin-left: 20px;
}

.card {
  background-color: rgb(255, 255, 255);
  width: 80%;
  height: 164px;
  border-radius: 7px;
  margin-bottom: 15px;
}

.mainTitle {
  font-size: 16px;
  color: #4a4a4a;
  font-weight: bolder;
}

.title {
  font-size: larger;
  font-weight: bolder;
  margin-left: 15px;
}

.distance{
    margin-top: 9px;
}
</style>
